<template>
  <view>
     <uni-nav-bar title="" height="175rpx" :border="false" @clickLeft="clickLeft"><!-- @clickRight="clickRight" -->
       <view class="title">
         <view class="text">
           设计方案名
         </view>
         <view class="img">
           <image src="../../static/prebook/xiugai2.png" mode=""></image>
         </view>
       </view>
      <template v-slot:left>
        <view>
          <uni-icons type="back" color="#666" size="18" />
        </view>
      </template>
      <!-- <template v-slot:right>
        <view class="img">
          <image src="../../static/prebook/fenxiang.png" mode=""></image>
        </view>
      </template> -->
     </uni-nav-bar>
     <view class="navbarborder"></view>
     <view class="content">
       <view class="list1">
         <view class="left">封面图</view>
         <view class="right">
           <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
         </view>
       </view>
       <view class="list2">
         <view class="title">备注</view>
         <view class="main">
           <u-input v-model="textareaValue" type="textarea" :border="true" :height="200" :auto-height="true" />
         </view>
       </view>
       <view class="list3">
         <view class="middle">
           <view class="card">
             <view class="header">
               <view class="left">
                 <view class="name">市场部(15)</view>
               </view>
             </view>
             <view class="listitem">
               <view class="header">
                 <view class="left">
                   <view class="name">休息室(2)</view>
                 </view>
               </view>
               <view class="middle">
                 <view class="left">
                   <view class="img">
                     <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                   </view>
                 </view>
                 <view class="right">
                   <view class="text">饮水机旁</view>
                   <view class="main">
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view> <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                   </view>
                 </view>
                 <view class="left">
                   <view class="img">
                     <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                   </view>
                 </view>
                 <view class="right">
                   <view class="text">冰箱旁</view>
                   <view class="main">
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view> <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                   </view>
                 </view>
               </view>
             </view>
             <!--  -->
             <view class="listitem">
               <view class="header">
                 <view class="left">
                   <view class="name">V01室(2)</view>
                 </view>
               </view>
               <view class="middle">
                 <view class="left">
                   <view class="img">
                     <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                   </view>
                 </view>
                 <view class="right">
                   <view class="text">饮水机旁</view>
                   <view class="main">
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view> <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                     <view class="box">
                       <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                       <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                     </view>
                   </view>
                 </view>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const clickLeft = () => {
    console.log('clickLeft',)
  }
  // const clickRight = () => {
  //   console.log('clickRight',)
  // }
  const textareaValue = ref('')
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  $nav-height: 30px;  
  .input-uni-icon {
  	line-height: $nav-height;
  }
  .title{
    height: 170rpx;
    width: 100%;
    line-height: 170rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .text{
      // width: 100%;
    }
    .img{
      width: 30rpx;
      height: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
  // .img{
  //   width: 40rpx;
  //   height: 40rpx;
  //   image{
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  .navbarborder{
    height: 0;
    border-top: 2rpx solid #EEEEEE;
  }
  .content{
    padding: 10rpx;
    .list1{
      display: flex;
      width: 100%;
      height: 200rpx;
      .left{
        width:375rpx;
        font-size: 20rpx;
        font-weight: 700;
      }
      .right{
        width: 375rpx;
        height: 200rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .list2{
      width: 100%;
      .title{
        width: 100%;
        height: 50rpx;
        display: flex;
        justify-content: flex-start;
        line-height: 50rpx;
        font-size: 20rpx;
        font-weight: 700;
      }
      .main{
        
      }
    }
    .list3{
      width: 100%;
      height: 100%;
      .middle{
        width: 100%;
        margin-top: 20rpx;
        border: 2rpx solid #EEEEEE;
        .card{
          width: 100%;
          padding: 0;
          .header{
            box-shadow: 0 0 5rpx 5rpx #EEEEEE;
            padding: 0 10rpx;
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
          }
          .listitem{
            width: 100%;
            padding: 10rpx;
            .header{
              box-shadow:none;
              padding: 0 10rpx;
              width: 100%;
              height: 80rpx;
              display: flex;
              justify-content: space-between;
              .left{
                display: flex;
                align-items: center;
                .name{
                  font-size: 30rpx;
                  font-weight: 600;
                }
              }
            }
            .middle{
              display: flex;
              flex-wrap: wrap;
              width: 100%;
              // justify-content: space-between;
              border:none;
              .left{
                width: 350rpx;
                height: 300rpx;
                // border: 1rpx solid red;
                .img{
                  width: 350rpx;
                  height: 300rpx;
                  position: relative;
                  image{
                    width: 100%;
                    height: 100%;
                  }
                  // .close{
                  //   position: absolute;
                  //   top: 0;
                  //   right: 0;
                  //   width: 30rpx;
                  //   height: 30rpx;
                  //   border: 1rpx solid red;
                  // }
                }
              }
              .right{
                width: 350rpx;
                height: 300rpx;
                padding: 10rpx;
                .text{
                  width: 350rpx;
                  height: 50rpx;
                  line-height: 50rpx;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start
                }
                .main{
                  width: 100%;
                  height: 250rpx;
                  display: flex;
                  align-items: flex-end;
                  flex-wrap:nowrap;
                  overflow-x: scroll;
                  .box{
                    width:200rpx;
                    height: 200rpx;
                    position: relative;
                    margin-right: 10rpx;
                    flex: none;
                    // border: 1rpx solid red;
                    image{
                      width: 100%;
                      height: 100%;
                    }
                    .close{
                      position: absolute;
                      top: 0;
                      right: 0;
                      width: 30rpx;
                      height: 30rpx;
                      border: 1rpx solid red;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>